<template>
	<div class="page improve">
		<view-box ref="viewBox" class='viewbox'>
			<x-header class='header' slot="header" :left-options="{backText: '',preventGoBack:true}">
				<span slot="left" style="margin-left: 12px; color: #fff;" id="back">返回</span>
				改善方案
			</x-header>
			<div class="top" style="height: 47px; width: 100%;"></div>
			<group style='margin-top: 10px;'>
				<cell class='improve_cell' title="健康问题" is-link :border-intent="false" :arrow-direction="showContent1 ? 'up' : 'down'" @click.native="showContent1 = !showContent1">
					<img slot="icon" width="60" style="display:block;margin-right:5px;" src="../../../assets/image/improve_01.png">
				</cell>
			</group>
			<div class="slide" :class="showContent1?'animate':''">
				<p class="title title_first">疾病</p>
				<p class="ospan">{{ health_question.disease }}</p>
				<p v-if="health_question.disease == ''">无</p>
				<p class="title">疾病认知</p>
				<p class="ospan">{{ health_question.diseaseCognition }}</p>
				<p v-if="health_question.diseaseCognition == ''">无</p>
				<p class="title">生活问题</p>
				<p class="ospan">{{ health_question.lifeIssues }}</p>
				<p v-if="health_question.lifeIssues == ''" style="padding-bottom: 10px;">无</p>
			</div>

			<cell class='improve_cell' title="原因分析" is-link :border-intent="false" :arrow-direction="showContent2 ? 'up' : 'down'" @click.native="showContent2 = !showContent2">
				<img slot="icon" width="60" style="display:block;margin-right:5px;" src="../../../assets/image/improve_02.png">
			</cell>
			<div class="slide" :class="showContent2?'animate':''">
				<p class="title title_first">家族史原因</p>
				<p class="ospan">{{ cause_analysis.familyCases }}</p>
				<p v-if="cause_analysis.familyCases == ''">无</p>
				<p class="title">生活习惯原因</p>
				<p class="ospan">{{ cause_analysis.live }}</p>
				<p v-if="cause_analysis.live == ''">无</p>
				<p class="title">其他疾病引起原因</p>
				<p class="ospan">{{ cause_analysis.liveReason }}</p>
				<p v-if="cause_analysis.liveReason == ''" style="padding-bottom: 10px;">无</p>
			</div>
			<cell class='improve_cell' title="管理目标" is-link :border-intent="false" :arrow-direction="showContent3 ? 'up' : 'down'" @click.native="showContent3 = !showContent3">
				<img slot="icon" width="60" style="display:block;margin-right:5px;" src="../../../assets/image/improve_03.png">
			</cell>
			<div class="slide" :class="showContent3?'animate':''">
				<p class="ospan plan" v-for="item in goal">
					{{item.text}}
					<p v-if="goal == ''" style="padding: 5px 5px 10px 5px;">无</p>
				</p>
			</div>
			<cell class='improve_cell' title="干预计划" is-link :border-intent="false" :arrow-direction="showContent4 ? 'up' : 'down'" @click.native="showContent4 = !showContent4">
				<img slot="icon" width="60" style="display:block;margin-right:5px;" src="../../../assets/image/improve_04.png">
			</cell>
			<div class="slide first-btnbox" :class="showContent4?'animate':''">
				<div class="innerbox">
					<flexbox>
						<flexbox-item>
							<x-button plain type="default" class='txt' @click.native='toHealthImprove'>医疗建议</x-button>
						</flexbox-item>
						<flexbox-item>
							<x-button plain type="primary" class='txt' @click.native='toMonitorImprove'>监测指导</x-button>
						</flexbox-item>
						<flexbox-item>
							<x-button plain type="warn" class='txt' @click.native='toVisitImprove'>就诊指导</x-button>
						</flexbox-item>
						<flexbox-item>
							<x-button plain type="warn" class='txt' @click.native='toReviewImprove'>复查指导</x-button>
						</flexbox-item>
					</flexbox>
				</div>
			</div>
			<cell class='improve_cell' title="改善建议" is-link :border-intent="false" :arrow-direction="showContent5 ? 'up' : 'down'" @click.native="showContent5 = !showContent5">
				<img slot="icon" width="60" style="display:block;margin-right:5px;" src="@/assets/image/improve_05.png">
			</cell>
			<div class="slide first-btnbox" :class="showContent5?'animate':''">
				<div class="innerbox">
					<flexbox>
						<flexbox-item>
							<x-button plain class='txt' @click.native='toDietImprove'>饮食指导</x-button>
						</flexbox-item>
						
						<flexbox-item>
							<x-button plain class='txt' @click.native='toMotionImprove'>运动指导</x-button>
						</flexbox-item>
						<flexbox-item>
							<x-button plain class='txt' @click.native='toSleep'>睡眠指导</x-button>
						</flexbox-item>
						<flexbox-item>
							<x-button plain class='txt' @click.native='toPsychology'>心理指导</x-button>
						</flexbox-item>
					</flexbox>
				</div>
			</div>
		</view-box>
		
		<!-- 底部 tab 栏 -->
		<tabbar id="tabbar">
			<tabbar-item @on-item-click='toHealBase'>
				<img slot="icon" src="@/assets/image/heal.png">
				<span slot="label" class="nostate">健康档案</span>
			</tabbar-item>
			<tabbar-item @on-item-click='toDatamonitor' ref='selectedItem'>
				<img slot="icon" src="@/assets/image/index.png">
				<img slot="icon-active" src="@/assets/image/index_active.png">
				<span slot="label" class="nostate">数据监测</span>
			</tabbar-item>
			<tabbar-item @on-item-click='toCase'>
				<img slot="icon" src="@/assets/image/scheme.png">
				<img slot="icon-active" src="@/assets/image/scheme_active.png">
				<span slot="label" class="nostate">健康病历</span>
			</tabbar-item>
			<tabbar-item :selected="selected" @on-item-click='toImprove'>
				<img slot="icon" src="@/assets/image/improve.png">
				<img slot="icon-active" src="@/assets/image/improve_active.png">
				<span slot="label" style="color: #3aaffc;">改善方案</span>
			</tabbar-item>
		</tabbar>
		<!-- 子页面 -->
		<transition>  <!-- enter-active-class='slideInRight animated' leave-active-class='slideOutRight animated'-->
			<router-view> 
			</router-view>
		</transition>
	</div>
</template>

<script>
	import Api from '@/api/index.js' //  引入api文件
	export default {
		data() {
			return {
				customer_id: '',
				selected: true,
				showContent1: false,
				showContent2: false,
				showContent3: false,
				showContent4: false,
				showContent5: false,
				health_question: {
					disease: '',
					diseaseCognition: '',
					lifeIssues: ''
				},
				cause_analysis: {
					familyCases: '',
					live: '',
					liveReason: ''
				},
				goal: []
			}
		},
		created(){
			this.customer_id = localStorage.getItem('customer_id');
			this.getData();
		},
		mounted(){
			//  与安卓交互， 点击返回app主页面
			document.getElementById('back').onclick = function() {
				android.showToast("000000");
			}
		},
		methods: {
			getData(){
//				const health_questionApi = 'http://192.168.6.60:8083/improve/health_question/' + this.customer_id;   //  健康问题  API
//			    const cause_analysisApi = 'http://192.168.6.60:8083/improve/cause_analysis/' + this.customer_id;    //  原因分析
//			    const management_goalApi = 'http://192.168.6.60:8083/improve/management_goal/' + this.customer_id;  // 管理目标
			    this.$http.get(Api.health_questionApi + this.customer_id)
			    .then(({data})=>{
			    	console.log(data)
			    	this.health_question.disease = data.data.disease;
			    	this.health_question.diseaseCognition = data.data.diseaseCognition;
			    	this.health_question.lifeIssues = data.data.lifeIssues;
			    })
			    
			    this.$http.get(Api.cause_analysisApi + this.customer_id)
			    .then(({data})=>{
			    	console.log(data);
			    	this.cause_analysis.familyCases = data.data.familyCases;
			    	this.cause_analysis.live = data.data.live;
			    	this.cause_analysis.liveReason = data.data.liveReason;
			    })
			    
			    this.$http.get(Api.management_goalApi + this.customer_id)
			    .then(({data})=>{
//			    	console.log(data);
			    	data.data.goal.split('</br>').map(e=>{
			    		this.goal.push({text: e})
			    	})
			    })
			    
			},
			//  去到  医疗建议页面
			toHealthImprove(){
				this.$router.push({
					path: '/improve/health'
				})
			},
			//  去到监测指导页面
			toMonitorImprove(){
				this.$router.push({
					path: '/improve/monitor'
				})
			},
			//  去到就诊指导
			toVisitImprove(){
				this.$router.push({
					path: '/improve/visit'
				})
			},
			//  查查指导
			toReviewImprove(){
				this.$router.push({
					path: '/improve/review'
				})
			},
			  //   饮食指导
			toDietImprove(){
				this.$router.push({
					path: '/improve/diet'
				})
			},
			//  运动指导
			toMotionImprove(){
				this.$router.push({
					path: '/improve/motion'
				})
			},
			//  心理指导
			toPsychology(){
				this.$router.push({
					path: '/improve/psychology'
				})
			},
			//  睡眠指导
			toSleep(){
				this.$router.push({
					path: '/improve/sleep'
				})
			},
			// 去到健康档案
			toHealBase(){
				this.$router.push({
					path: '/healthbase'
				})
			},
			// 去到 数据监测
			toDatamonitor(){
				this.$router.replace({
					path: '/datamonitor'
				})
			},
			// 健康病历
			toCase(){
				this.$router.replace({
					path: '/case'
				})
			},
			// 去到 改善方案
			toImprove(){
				this.$router.replace({
					path: '/improve'
				})
			}
		}
	}
</script>

<style lang="less" scoped>

	.first-btnbox {
		padding: 0 !important;
		.txt {
			font-size: 14px;
			padding: 5px 7px;
			color: rgb(58, 175, 252);
			border: 1px dashed rgb(58, 175, 252);
			background-color: #fff !important;
		}
	}
	
	.slide {
		padding: 0 50px;
		overflow: hidden;
		max-height: 0;
		/*transition: 0.8s;*/
		background-color: rgb(255, 251, 245);
		.title {
			font-weight: bold;
			font-size: 16px;
		}
		.ospan {
			font-size: 14px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-bottom: 10px;
		}
		.plan {
			padding-top: 10px !important;
		}
		.title_first {
			padding-top: 10px;
		}
		.innerbox {
			background: #fff;
			padding-bottom: 10px;
		}
	}
	
	img {
		margin-right: 20px !important;
	}
	
	.animate {
		max-height: 9999px;
		/*transition-timing-function: 2s;
		transition-delay: 0s;*/
	}
	
	.improve {
		position: absolute;
		top: 50px;
		left: 0;
		right: 0;
		bottom: 0 !important;
		.viewbox {
			padding: 10px;
			padding-top: 0;
			.improve_cell {
				background-color: rgb(212, 238, 255);
				margin-bottom: 10px;
				font-size: 18px;
			}
		}
	}
</style>